<template>
  <el-table
    :data="optionsList"
    height="250"
    style="width: 100%"
    empty-text="-"
    @current-change="changeFn"
  >
    <el-table-column
      prop="channelCode"
      label="货道编号"
      width="100"
    />
    <el-table-column
      prop="sku.skuName"
      label="商品名称"
      width="120"
    />
    <el-table-column
      prop="currentCapacity"
      label="当前数量"
      width="120"
    />
    <el-table-column
      prop="add"
      label="还可添加"
      width="120"
    />
    <el-table-column
      prop="maxCapacity"
      label="补满数量"
    >
      <template #default="{ row }">
        <el-input-number
          v-if="row.sku.skuName !== '-'"
          v-model="row.maxCapacity"
          controls-position="right"
          :min="0"
          :max="10"
          :disabled="row.currentCapacity===10"
          @change="handleChange(row.maxCapacity)"
        />
        <span v-else>货道暂无此商品</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    orderList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      show: true
    }
  },
  computed: {
    optionsList() {
      return this.orderList.map(item => {
        item.add = item.sku
          ? (10 - item.currentCapacity)
          : '-'
        if (!item.sku) {
          this.show = false
          item.sku = { skuName: '-' }
          item.maxCapacity = '-'
          item.currentCapacity = '-'
        }
        return item
      })
    }
  },
  methods: {
    handleChange(val) {
      // console.log(val)
    },
    changeFn(currentRow) {
      this.$emit('addCurrent', currentRow)
      // console.log(currentRow)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
